import { useSelector } from "react-redux";
import { Icon, addIcon } from "@iconify-icon/react";
import ComponentCardGroup from "@/components/Editor/ComponentCardGroup/ComponentCardGroup";

type TabPosition = "left" | "right" | "top" | "bottom";

// 构建组件
function buildComponentItem(editorConfig) {
  return editorConfig.map((item) => {
    return {
      ...item,
      icon: <Icon icon={item.icon}></Icon>,
      children: item.children ? (
        <ComponentCardGroup
          key={item.key}
          items={item.children}
        ></ComponentCardGroup>
      ) : null,
    };
  });
}

function Component() {
  // 编辑器全局初始化配置
  const editorConfig = useSelector(
    (state) => (state as any).editor.editorConfig
  );

  // 组件集合
  const components = buildComponentItem(editorConfig.componets);

  const [tabPosition, setTabPosition] = useState<TabPosition>("left");
  return (
    <Tabs tabPosition={"left"} defaultActiveKey="base" items={components} />
  );
}
export default Component;
